<template>
  <div class="view-fill">
    <div class="app-container-flex">
      <FullScreen
        v-model="showDialog"
        title="选择分析方案"
        @returnBack="returnBack"
      >
        <template v-slot:full-button>
          <el-button :disabled="!canSave" @click="save()">保存</el-button>
        </template>
        <div class="model-panel">
          <div class="model-panel-body">
            <!-- 表格 -->
            <PageTable
              v-model:data="tableInfo.data"
              :refresh="tableInfo.refresh"
              :init-curpage="tableInfo.initCurpage"
              :api="tableInfo.api"
              :pager="true"
              :check-box="false"
              :highlight-row="true"
              :tab-index="true"
              :query="filterInfo.query"
              :field-list="tableInfo.fieldList"
              :isDynamic="false"
              :isRowClickSelect="true"
              row-key="id"
              @handleEvent="handleEvent"
            />
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>方案设备详细信息</p>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <PageTable
                v-model:data="tableProInfo.data"
                :pager="false"
                :checkBox="false"
                :tab-index="true"
                :isDynamic="false"
                :field-list="tableProInfo.fieldList"
              >
              </PageTable>
            </div>
          </div>
        </div>
      </FullScreen>
    </div>
  </div>
</template>

<script setup name="changeAnalysisPlans">
import { getAnalysisPlanPage, getAnalysisPlanDetailById } from '@/api/asset.js'
const { proxy } = getCurrentInstance()
const props = defineProps(['visible', 'id', 'query'])
// 分析项目表格
const tableInfo = ref({
  api: null,
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  fieldList: [
    {
      label: '分析方案编码',
      value: 'planNo',
    },
    {
      label: '分析方案名称',
      value: 'planName',
    },
    {
      label: '分析部门',
      value: 'deptName',
    },
    {
      label: '分析类型',
      value: 'analysisTypeValue',
    },
    {
      label: '收入/成本摊销方式',
      value: 'amortizationMethodValue',
    },
  ],
})
const filterInfo = ref({
  query: props.query,
})
// 绑定项目表格
const tableProInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  fieldList: [
    {
      label: '资产卡片号',
      value: 'assetCode',
    },
    {
      label: '资产名称',
      value: 'assetName',
    },
    { label: '规格', value: 'standard' },
    { label: '厂家', value: 'brandName' },
    { label: '供应商', value: 'supplierName' },
  ],
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    proxy.$emit('update:visible', val) // 更新父组件visible
  },
})
const canSave = computed(() => {
  return tableInfo.value.selections.length
})

onMounted(() => {
  proxy.$nextTick(() => {
    tableInfo.value.api = getAnalysisPlanPage
    getList()
  })
})
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheckRadio':
      tableInfo.value.selections = [data]
      getProInfo(data.id)
      break
  }
}
function returnBack() {
  proxy.$emit('returnBack', false)
}
function getList() {
  tableInfo.value.refresh = Math.random()
}
function getProInfo(id) {
  getAnalysisPlanDetailById({
    analysisPlanId: id,
  }).then((res) => {
    if (res && res.success) {
      tableProInfo.value.data = res.data
    }
  })
}
function save() {
  proxy.$emit('callback', {
    selectData: tableInfo.value.selections[0],
    detailsDate: tableProInfo.value.data,
  })
}
</script>
<style scoped lang="scss">
:deep(.table-scroll-hidden) > .el-table {
  overflow-y: hidden;
}
:deep(.el-dialog__body) {
  height: 355px;
  display: flex;
  flex-direction: column;
}
</style>
